<template>
    <div style="width: 100%;height: 1010px">
        <p>购物车{{name}} {{yifu}}
            <button @click="addProNum">立刻</button>
            <button @click="updateProductNum">加入购物车</button>
        </p>
        <p>我的productNum= {{buyCar.productNum}}</p>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

    /**
     * 模块化后（开启命名空间），取值比较麻烦
     * 1.之前的 ['key'] 改 [{newkey:'key'}]
     * 2.this.$store.dispatch('key') or this.$store.commit("key")
     *   改 this.$store.commit("path/key")
     */
    export default {
        name: "buyCar",
        data() {
            return {
                name: "sqa",

            }
        }, computed: {
            //计算属性
            ...mapGetters({
                yifu:'buyCar/yifu'
            }),
            ...mapState(['buyCar'])//模块的时候 state 是模块名称，解析出来是对象，获取元素，就对象.元素
        }, methods: {
            ...mapActions({
                updateProductNum:'buyCar/updateProductNum'
            }),
            ...mapMutations({addProNum:'buyCar/addProNum'})
        }, mounted() {
           console.log(this)
        }
    }
</script>

<style scoped>

</style>
